<template>
  <div class="realName">
    <van-nav-bar title="实名认证" left-arrow @click-left="leftClick">
    </van-nav-bar>
    <div class="realName-one">
      <div class="realName-one-d">
        <img
          src="../assets/image/icon_mine_logo.png"
          width="27"
          height="27"
          alt=""
        />
        <span class="span">{{ appName }}</span>
      </div>
      <h5>身份信息安全验证</h5>
      <p>为保障您的资金安全，需要验证身份信息</p>
      <div class="realName-one-button">
        <div class="realName-one-button-d">
          <img
            src="../assets/image/icon_realname_item1.png"
            width="14"
            height="14"
            alt=""
          />
          <span>实名福利</span>
        </div>

        <p>完成实名认证后可获得<span> 3元 </span>奖励</p>
      </div>
      <div class="xian margin-top"></div>
    </div>

    <div class="item-div">
      <div class="item" @click="intelligenceNameClick">
        <img
          src="../assets/image/icon_realname_item2.png"
          width="23"
          height="23"
          alt=""
        />
        <div>
          <p class="title">刷脸认证</p>
          <p class="text">(智能审核)体验刷脸科技，享受更多服务</p>
        </div>
        <span>{{ rgName }}</span>
        <img
          src="../assets/image/icon_right.png"
          width="7"
          height="13"
          alt=""
        />
      </div>
      <div class="xian"></div>
      <div class="item" @click="manualAuditClick">
        <img
          src="../assets/image/icon_realname_item3.png"
          width="23"
          height="23"
          alt=""
        />
        <div>
          <p class="title">人工审核</p>
          <p class="text">(人工审核)仅用于核实身份</p>
        </div>
        <span>{{ znName }}</span>
        <img
          :class="{ hidden: znNameImg }"
          src="../assets/image/icon_right.png"
          width="7"
          height="13"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
<script>
import { getApiUserInfo } from "../network/ApiServe";
export default {
  name: "RealName",
  created() {
    this.token = localStorage.getItem("token");
    this.appName = localStorage.getItem("appName");
  },
  data() {
    return {
      userInfo: {},
      rgName: "去完成",
      znName: "去完成",
      znNameImg: false,
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    leftClick() {
      this.$router.back(-1);
    },
    manualAuditClick() {
      if (this.userInfo.result.realnameStatus === "0") {
        return this.$toast("正在审核中,请耐心等待...");
      } else if (this.userInfo.result.realnameStatus === "1") {
        return this.$toast("已经上传过,无需再次上传");
      }
      this.$router.push("manualaudit");
    },
    intelligenceNameClick() {
      if (this.userInfo.result.realnameStatus === "0") {
        return this.$toast("正在审核中或者审核通过,请耐心等待");
      }
      this.$router.push("intelligenceName");
    },
    getUserInfo() {
      getApiUserInfo(this.token)
        .then((res) => {
          console.log(res, "getUserInfo");
          if (res.resp_code === "000000") {
            this.userInfo = res;
            if (this.userInfo.result.realnameStatus === "0") {
              this.rgName = "实名中";
              this.znName = "已上传";
              this.znNameImg = true;
            } else if (
              this.userInfo.result.realnameStatus === "1" &&
              this.userInfo.whether === "0"
            ) {
              this.rgName = "去完成";
              this.znName = "已上传";
            }
            console.log(this.userInfo, "userinfo");
          }
        })
        .catch((err) => {
          console.log(err, "getUserInfo");
        });
    },
  },
};
</script>
<style scoped>
.realName >>> .van-nav-bar .van-icon {
  color: #444;
}
.realName-one {
  height: 170px;
  background-color: #fff;
  padding-left: 15px;
  padding-right: 15px;
  color: #444;
}
.realName-one div.realName-one-d {
  display: flex;
  align-items: center;
  padding-top: 12px;
}
.realName-one .span {
  font-size: 9px;
  margin-left: 5px;
}
.realName-one h5 {
  margin-top: 15px;
  font-size: 24px;
}
.realName-one p {
  margin-top: 8px;
  font-size: 11px;
  color: #999;
}
.realName-one-button {
  width: 285px;
  height: 30px;

  margin-top: 20px;
  display: flex;
  align-items: flex-end;
}
.realName-one-button div.realName-one-button-d {
  display: flex;
  align-items: center;
  background-color: red;
  height: 100%;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  padding-right: 7px;
  padding-left: 6px;
  line-height: 30px;
  color: #fff;
  font-size: 13px;
}
.realName-one-button div.realName-one-button-d img {
  margin-right: 5px;
}
.realName-one-button p {
  color: #444;
  height: 100%;
  font-size: 13px;
  border-top: 1px solid #8d8d8d;
  border-right: 1px solid #8d8d8d;
  border-bottom: 1px solid #8d8d8d;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  padding-left: 8px;
  padding-right: 8px;
}
.realName-one-button p span {
  color: #f63802;
  line-height: 30px;
  font-size: 13px;
  margin-left: -1px;
}
.xian {
  height: 1px;

  background-color: #f7f7f7;
}
.item {
  background-color: #fff;

  display: flex;
  align-items: center;
  height: 74px;
}
.margin-top {
  margin-top: 14px;
}
.item div {
  flex: 1;
  margin-left: 12px;
}
.item .title {
  font-size: 15px;
  color: #444;
}
.item .text {
  font-size: 11px;
  margin-top: 4px;
  color: #999;
}
.item img {
  display: block;
}
.item span {
  font-size: 13px;
  color: #1777ff;
  margin-right: 8px;
}
.item-div {
  background-color: #fff;
  padding-left: 15px;
  padding-right: 15px;
}
.hidden {
  visibility: hidden;
}
</style>